<!DOCTYPE html>
<html>

<head>
    <title>个人页面</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/userProfiles.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        $(function () {
            //ta的旅行单
            var params = getParams();
            $.get('/users/'+params.id+'/travelLists',function (data) {
                $('#pills-contact-tab').renderValues(data);
            });

            $('#pills-contact-tab').click(function () {
                //当前页的框
                var nowInput = $('#nowPage');
                //总页数
                var totalPage = 1;
                //定一个用于存储游记的数组
                var travellist = [];

                function query() {
                    //获取当前页
                    var nowPage = nowInput.val();
                    //查询数据时要带上当前页的参数
                    $.get('/users/' + params.id + '/travelLists', {currentPage: nowPage}, function (data) {
                        console.log(data);
                        //把两个数组合并
                        $.merge(travellist, data.list);
                        var json = {
                            list: travellist
                        };

                        var index = 1;
                        //渲染数据
                        $('#pills-contact').renderValues(json,{
                            getName:function (item, value) {
                                if(index <= 9){
                                    $(item).html("0"+index++ +"/"+value)
                                }else{
                                    $(item).html(index++ +"/"+value)
                                }
                            },getHref: function (item, value) {
                                //获取要跳转的地址
                                var href = $(item).data("href");
                                //把id拼接上去,在设置到a链接上
                                $(item).attr("href", href + value);
                            }
                        });
                        //设置总页数
                        totalPage = data.pages;
                    })

                    //查询过后当前页加一
                    nowInput.val(parseInt(nowPage) + 1);
                }

                //默认查询第一页的数据
              /*  //当前页
                var nowPage = nowInput.val();
                if(nowPage == 1){
                    query();
                }else{
                    nowInput.val(2);
                    query();
                }*/
                query();

                $(window).scroll(function () {
                    if ($(window).height() + $(document).scrollTop() >= $(document).height()) {
                        //获取当前页
                        var nowPage = nowInput.val();
                        //第一页到底之后查询第二页的数据
                        if (nowPage <= totalPage) {
                            query();
                        } else {
                            $(document).dialog({
                                type: 'notice',
                                infoText: '已经到底部了',
                                autoClose: 1000,
                                position: 'bottom'  // center: 居中; bottom: 底部
                            });
                        }
                    }
                });
            })
        })
    </script>
</head>
<body>
<div class="container bg">
    <a href="javascript:window.history.go(-1)" class="my-arrow">
        <span><i class="fa fa-chevron-left fa-2x"></i></span>
    </a>
    <div class="container">
        <div class="info">
            <div render-key="coverImgUrl" render-fun="getCSS">
                <img class="rounded-circle" render-src="headImgUrl" width="17%">
                <p class="name" render-html="nickName">奋斗的小蜜蜂</p>
                <p render-html="sign"></p>

                <div class="row num">
                    <div class="col-2 border border-left-0 border-top-0 border-bottom-0">
                        <div>
                            <span render-html="attentionNum"></span>
                        </div>
                        <div>
                            <span>关注</span>
                        </div>
                    </div>
                    <div class="col-2">
                        <div>
                            <span render-html="fansNum"></span>
                        </div>
                        <div>
                            <span>粉丝</span>
                        </div>
                    </div>
                    <div class="col">
                        <button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
                        <button class="btn btn-success ibtn" id="followBtn">关注</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
                TA的游记[<span render-html="length"></span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
                TA的点评[<span render-html="tagLength"></span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
                TA的旅行单[<span>0</span>]
            </a>
        </li>
    </ul>
    <div class="container tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="travels">
            <div render-loop="list">
                <dl class="list">
                    <dd>
                        <a data-href="/travelContent.html?id=" render-key="list.id" render-fun="getUrl">
                            <img render-src="list.coverUrl">
                        </a>

                        <p>
                            <span class="title" render-html="list.title">
                            </span>
                            <span class="span-right">
                                    <span render-html="list.praiseNum"></span>
                                    <i class="fa fa-thumbs-o-up fa-2x likeBtn" style="color: gold;" render-key="list.id" render-fun="getId">
                                    </i>
                            </span>
                        </p>
                        <hr>
                    </dd>
                </dl>
            </div>
        </div>

        <div class="comment tab-pane fade " id="comments">

            <div render-loop="list">
                <div class="row">
                    <div class="col-2 comment-head">
                        <img class="rounded-circle" render-src="list.user.headImgUrl">
                    </div>
                    <div class="col">
                        <span class="comment-star" render-key="list.starNum" render-fun="getStar">
                        </span>

                        <span class="comment-date" render-html="list.createTime">2018-07-11</span>
                        <div class="comment-content">
                            <a href="/strategyComment.html" data-id="4">
                                <p render-html="list.content"></p>
                            </a>
                        </div>
                        <ul class="comment-img" render-loop="list.imgs">
                            <li>
                                <img render-src="list.imgs.self">
                            </li>
                        </ul>

                        <div class="comment-link">
                            <a href="/strategyCatalogs.html" data-id="2">
                                <img render-src="list.strategy.coverUrl"><span render-html="list.strategy.title"></span>
                                <i class="fa fa-angle-right fa-2x"></i>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="pills-contact">
            <input type="hidden" name="nowPage" id="nowPage" value="1">
            <div class="catalogs">
                <div render-loop="list">
                    <div class="container trip">
                        <h6 render-key="list.s_subTitle" render-fun="getName"></h6>
                        <div class="comment-link">
                            <a data-href="strategyCatalogs.html?id=" render-key="list.s_id" render-fun="getHref">
                                <img render-src="list.s_coverUrl"> <span
                                    render-html="list.s_title"></span>
                                <i class="fa fa-angle-right fa-2x"></i>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    var user = JSON.parse(sessionStorage.getItem("user"));
    var currentPage = 1;
    var pages;
    var store = [];
    var param = getParams();
    var state;


    var travelIds;

    if (user) {
        $.get("praises/travels/" + param.id + "/" + user.id, {state: 1}, function (data) {
            travelIds = data;
        })
    }

    function query() {
        $.get("/users/" + param.id + "/travels", {
            "state": 2,
            "currentPage": currentPage,
            "pageSize": 3
        }, function (data) {
            //console.log(data),
            $(".info").renderValues(data.list[0].author, {
                getCSS: function (item, value) {
                    $(item).css("background-image", "url('" + value + "')");
                }
            });
            $.merge(store, data.list);
            var json = {
                list: store
            };
            console.log(json);
            //游记分页
            $("#travels").renderValues(json, {
                getUrl: function (item, value) {
                    $(item).attr("href", $(item).data("href") + value);

                },
                getId: function (item, value) {
                    $(item).attr("data-id", value);
                    //console.log(data);
                    if (travelIds) {
                        $.each(travelIds, function (index, ele) {
                            if (value == ele) {
                                $(item).removeClass("fa fa-thumbs-o-up fa-2x").addClass("fa fa-thumbs-up fa-2x");
                            }
                        })
                    }
                }
            });
            pages = data.pages;
            currentPage++;


            $(".likeBtn").click(function () {
                var item = $(this);
                var travelId = $(this).data("id");
                if (!user) {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '请登录了在点赞*_*!',
                        autoClose: 1000,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                    return;
                } else {
                    $.get("praises/travels/" + travelId, {state: 1}, function (data) {
                        console.log(data);
                        if (data) {
                            $.ajax({
                                url: '/praises/travels/' + travelId + '/' + user.id + '/1',
                                method: 'delete',
                                success: function () {
                                    item.removeClass("fa fa-thumbs-up fa-2x").addClass("fa fa-thumbs-o-up fa-2x");
                                    var num = item.prev().html()//当前元素前一个兄弟节点
                                    item.prev().html(num - 1)
                                }
                            });
                        } else {
                            var obj = {
                                state: 1,
                                travelId: travelId,
                                userId: user.id,
                                authorId: param.id
                            };
                            $.post("/praises/travels", obj, function (data) {
                                item.removeClass("fa fa-thumbs-o-up fa-2x").addClass("fa fa-thumbs-up fa-2x");
                                var num = item.prev().html();//当前元素前一个兄弟节点
                                item.prev().html(1 + Number(num))
                            });
                        }
                    })
                }
            });


        });
        $.get("/users/" + param.id + "/travels", {"pageSize": 0}, function (data) {
            $("#pills-tab").renderValues({
                length: data.list.length
            });

        });

    }

    //滚动条事件
    $(window).scroll(function () {
        //页面滑动查询
        if (($(window).height() + $(document).scrollTop()) >= $(document).height() - 2) {
            if (currentPage <= pages) {
                query();
            } else {
                $(document).dialog({
                    type: "notice",
                    position: "bottom",
                    infoText: '已经到底了',
                    autoClose: 800
                });
            }
        }
    });
    //点击当前页清零
    $("#pills-tab .nav-item").click(function () {
        currentPage = 1;
        store = [];
        query();
    });

    query();

    $("#followBtn").click(function () {
        var user = JSON.parse(sessionStorage.getItem("user"));
        if (!user) {
            $(document).dialog({
                type: 'confirm',
                closeBtnShow: true,
                content: "关注功能需要登录,是否马上登录?<br/>5秒中后自动跳转到登陆页面,可点击取消...",
                autoClose: 5000,
                overlayShow: true,
                buttonStyle: "stacked",
                buttonTextConfirm: "确定",
                buttonTextCancel: "取消",
                onClickConfirmBtn: function () {
                    window.parent.location.href = "/login.html";
                }
            });
        }
        if (state) {
            $.post("/users/relations", {"fansId": user.id, "attentionId": param.id}, function (data) {
                queryRelation();
                queryNum();
            });
        } else {
            if (param.id) {
                $.ajax({
                    method: "delete",
                    url: "/users/relations/" + user.id + "?attentionId=" + param.id,
                    success: function (data) {
                        queryRelation();
                        queryNum();
                    }
                })

            }
        }

    });

    //显示按钮
    function queryRelation() {
        if (user) {
            if ((user.id != param.id)) {
                $.get("/users/relations/" + user.id, {"attentionId": param.id}, function (data) {
                    var btnValue = "取消关注";
                    if (data) {
                        btnValue = "关注";
                    }
                    state = data;
                    $("#followBtn").html(btnValue);
                });
            } else {
                $("#followBtn").css("display", "none");
                $("#letterBtn").css("display", "none");
            }

        }
    }

    queryRelation();


    //查询关注数
    function queryNum() {
        $.get("/users/relations/" + param.id, {"type": "map"}, function (data) {
            $(".num").renderValues(data);

        });
    }

    queryNum();



        $.get("/users/" + param.id + "/strategyComments", function (data) {
            console.log(data);
            $("#comments").renderValues(data, {
                getStar: function (item, value) {
                    var temp = "";
                    for (var i = 0; i < value; i++) {
                        temp += '<i class="fa fa-star"></i>'
                    }
                    for (var i = 0; i < 5 - value; i++) {
                        temp += '<i class="fa fa-star-o"></i>'
                    }
                    $(item).html(temp);
                }
            });
        });



    //总数
    $.get("/users/" + param.id + "/strategyComments", {"pageSize": 0}, function (data) {
        $("#comments-tab").renderValues({tagLength: data.list.length});
    });
    //私信跳转
    $(function () {
        $("#letterBtn").click(function () {
            window.location.href="/mine/chat.html?id="+param.id;
        })
    })
</script>
</body>
</html>